<template>
<div>
{{id}}
<el-row>
	<el-form :inline="true" :model="form" size="small">

    <el-form-item v-if="gridid == ''">
	    <el-cascader 
			style="width:350px;"
			filterable
			:options="treedata"
			:props="props1"
			filterable
			change-on-select
			v-model="selectedOptions">
			</el-cascader>
	</el-form-item>

	<el-form-item >
	    <el-input v-model="form.name" placeholder="人员名"></el-input>
	</el-form-item>

	<el-form-item>
	    <el-button type="primary" @click="init">查询</el-button>
	</el-form-item>
</el-form>
</el-row>


<el-row>
<el-table
    :data="list.results"
    :header-cell-style="{
		'background-color': '#f4f4f5',
	    'color': '#616161',    
	}"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="人员名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="role_name"
      label="角色"
      width="100">
    </el-table-column>
    <el-table-column
      prop="company_name"
      label="所属网格"
      width="150">
    </el-table-column>
    <el-table-column
      prop="mobile"
      width="150"
      label="电话">
    </el-table-column>
    <el-table-column
      width="50"
      fixed="right"
      label="操作">
      	<template slot-scope="scope">
      		<el-button type="success" size="mini" 
      		icon="el-icon-view" circle
      		@click="playback(scope.row)">
      		</el-button>
      	</template>
    </el-table-column>
  </el-table>
</el-row>

<el-row class="text-right mt20 mb20">
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageNo"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="list.totalRecord">
</el-pagination>
</el-row>

</div>
</template>

<script>

import daterange from '@/components/daterange'

export default {
	
	name : 'question',
	
	data () {
		return {
		  	s_e : [this.$util.date2str(new Date()), this.$util.date2str(new Date())],

		  	//treedata : [],

		  	form : {},

		  	props1 : {
				value : 'id',
				label : 'name',
			},

			selectedOptions : ['1'],

			list : {},

			pageNo : 1,
		  	pageSize : 5,

		  	status_label : ['', '处理中', '已完成'],

		  	status_select_label : [
				{label : '全部', value : undefined},
				{label : '处理中', value : '1'},
				{label : '已完成', value : '2'},
			],
		}
	},

	props : {
		treedata: {
			type: Array,
			default () {
				return []
			},
		},

		gridid : {
			type : String,
			default : '',
		}
	},

	components : {
		daterange,
	},

	computed : {
		id () {
			this.init();
			return "";
		}
	},

	methods : {
		init () {
			let para = {
				fun : 'onlineList',
				//requestType : 'get',
				//grid_id : this.selectedOptions[this.selectedOptions.length - 1],
				...this.form,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log('onlineList');
					console.log(res);
					this.list = res;
				}
			};

			if(this.gridid == ''){
				para['grid_id'] = this.selectedOptions[this.selectedOptions.length - 1];
			}else{
				para['grid_id'] = this.gridid;
			}

			this.$http(para);
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		playback (item) {
			this.$emit('getpoint', {
				...item,
				what : 'user',
				lon : item.now_longitude, 
				lat : item.now_latitude,
			});
			
		},

		info () {

		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
